/** @jsx jsx **/
import {jsx} from '@emotion/react'
import React from "react";
import {Form, Input, Select} from "antd";
import {Project} from './list';
import {UserSelect} from 'components/user-select';

export interface User {
    id: number,
    name: string,
    email: string,
    title: string,
    organization: string,
    token?: string
}

interface SeachPanelProps {
    users: User[],
    param: Partial<Pick<Project, 'name' | 'personId'>>

    setParam: (param: SeachPanelProps["param"]) => void
}

export const SearchPanel = (props: SeachPanelProps) => {
    console.log(props.users, 'users')
    return (
        <Form css={{marginBottom: '2rem'}} layout={"inline"}>
            <Form.Item>
                {/*等价于setParam((Object.assign({},param,{name:evt.target.value})))*/}
                <Input
                    placeholder={'项目名'}
                    type="text"
                    value={props.param.name}
                    onChange={(evt) => {
                        props.setParam({
                            ...props.param,
                            name: evt.target.value,
                        });
                    }}
                />
            </Form.Item>
            <Form.Item>
                <UserSelect
                    defaultOptonName={'负责人'}
                    value={props.param.personId}
                    onChange={(value) =>
                        props.setParam({
                            ...props.param,
                            personId: value,
                        })
                    }/>
            </Form.Item>
        </Form>
    )
}
